<!DOCTYPE html>
<html>
<head>
    <title>批量导入频道</title>
    {% include 'system/common/header.html' %}
</head>
<style>
    /* 卡片内容区域样式 */
    .layui-card-body {
        padding: 20px;
        overflow: hidden;  /* 防止内容溢出 */
    }

    /* 上传区域容器 */
    .import-header {
        display: flex;
        align-items: flex-start;  /* 改为顶部对齐 */
        gap: 1.5rem;
        margin-bottom: 20px;
        width: 100%;
    }

    /* 左侧上传区域 */
    .upload-section {
        flex: 1;
        min-width: 0;  /* 防止flex子项溢出 */
    }

    /* 上传区域样式 */
    .layui-upload-drag {
        width: auto;  /* 改为自动宽度 */
        min-height: 180px;
        padding: 1.5rem;
        border: 2px dashed #e6e6e6;
        border-radius: 8px;
        background: #fafafa;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        box-sizing: border-box;  /* 确保padding包含在宽度内 */
    }

    /* 右侧按钮区域 */
    .action-section {
        width: 120px;
        flex-shrink: 0;  /* 防止按钮区域被压缩 */
    }

    /* 文件名显示区域 */
    #fileName {
        max-width: calc(100% - 40px);  /* 留出一定边距 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }
 /* 上传提示文本 */
 .upload-tip {
        text-align: center;
        transition: all 0.3s ease;
    }

    /* 文件预览区域 */
    #uploadPreview {
        width: 100%;
        text-align: center;
        transition: all 0.3s ease;
    }

    #uploadPreview p {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    #uploadPreview i {
        color: #009688;
        font-size: 1.2rem;
    }

    #fileName {
        background: #f0f0f0;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        color: #333;
        max-width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }

    /* 淡入淡出动画 */
    .fade-enter {
        animation: fadeIn 0.3s ease;
    }

    .fade-exit {
        animation: fadeOut 0.3s ease;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeOut {
        from { opacity: 1; transform: translateY(0); }
        to { opacity: 0; transform: translateY(10px); }
    }
    /* 响应式调整 */
    @media screen and (max-width: 768px) {
        .import-header {
            flex-direction: column;
            gap: 1rem;
        }

        .action-section {
            width: 100%;
        }

        .layui-upload-drag {
            min-height: 150px;  /* 移动端减小高度 */
        }
    }
</style>
<body class="pear-container">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 上传区域 -->
            <div class="layui-upload-drag" id="uploadArea">
                <!-- 上传提示 -->
                <div class="upload-tip" id="uploadTip">
                    <i class="layui-icon layui-icon-upload"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                </div>
                
                <!-- 文件预览 -->
                <div class="layui-hide" id="uploadPreview">
                    <p>
                        <i class="layui-icon layui-icon-file"></i>
                        <span>已选择文件:</span>
                        <span id="fileName"></span>
                    </p>
                </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="layui-form" style="margin-top: 20px;">
                <div class="layui-form-item">
                    <div class="layui-input-block" style="margin-left: 0;">
                        <button type="button" class="pear-btn pear-btn-primary" id="startImport">
                            <i class="layui-icon layui-icon-download-circle"></i>开始导入
                        </button>
                    </div>
                </div>
            </div>
            <!-- 导入进度 -->
            <div class="layui-progress layui-hide" lay-filter="importProgress" style="margin-top: 20px;">
                <div class="layui-progress-bar" lay-percent="0%"></div>
            </div>

            <!-- 导入结果 -->
            <div class="layui-hide" id="importResult" style="margin-top: 20px;">
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th>总数</th>
                            <th>成功</th>
                            <th>失败</th>
                            <th>耗时</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td id="totalCount">0</td>
                            <td id="successCount">0</td>
                            <td id="failCount">0</td>
                            <td id="timeUsed">0s</td>
                        </tr>
                    </tbody>
                </table>
                <div class="layui-collapse">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">失败详情[<span style="color: red;">关闭窗口后请刷新</span>]</h2>
                        <div class="layui-colla-content" id="failDetails">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 导入说明 -->
            <div class="layui-collapse" style="margin-top: 20px;">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">导入说明</h2>
                    <div class="layui-colla-content layui-show">
                        <p>1. 支持导入 .txt 格式的文件</p>
                        <p>2. 文件内容格式：频道名称,播放地址,分类</p>
                        <p>3. 每行一条数据，字段之间用<b style="color: red;">英文逗号</b>分隔</p>
                        <p>4. 示例：CCTV-1,http://example.com/cctv1,默认分类</p>
                        <p>5. 分类不存在时会自动创建，默认添加分类列表中排序的第一个分类</p>
                        <p>6. 如果频道、分类、播放地址同时存在时，则该频道信息<b style="color: red;">不会</b>导入。</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% include 'system/common/footer.html' %}
    <script>
        layui.use(['upload', 'element', 'layer', 'jquery'], function() {
        let upload = layui.upload;
        let element = layui.element;
        let layer = layui.layer;
        let $ = layui.jquery;

        let MODULE_PATH = "/iptvadmin/";
        let uploadFile = null;

        // 上传组件
        upload.render({
            elem: '#uploadArea',
            url: MODULE_PATH + 'import/upload',
            accept: 'file',
            acceptMime: 'text/plain',
            exts: 'txt',
            auto: false,
            bindAction: '#startImport',
            choose: function(obj) {
                uploadFile = obj.pushFile();
                obj.preview(function(index, file, result){
                    // 隐藏上传提示
                    $('#uploadTip').fadeOut(300, function() {
                        $(this).addClass('layui-hide');
                    });

                    // 显示文件信息
                    $('#fileName').text(file.name);
                    $('#uploadPreview')
                        .removeClass('layui-hide')
                        .hide()
                        .fadeIn(300);
                });
            },
            before: function() {
                layer.load();
                $('.layui-progress').removeClass('layui-hide');
                $('#importResult').addClass('layui-hide');
            },
            done: function(res) {
                layer.closeAll('loading');
                if (res.success) {
                    // 导入成功且无错误
                    layer.msg(res.msg, {
                        icon: 1,
                        time: 1000
                    }, function() {
                        // 关闭当前窗口并刷新父页面表格
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                        parent.layui.table.reload('channel-table');
                    });
                } else {
                    // 显示导入结果（包含错误信息）
                    $('#totalCount').text(res.data.total);
                    $('#successCount').text(res.data.success);
                    $('#failCount').text(res.data.fail);
                    $('#timeUsed').text(res.data.time + 's');
                    
                    // 显示失败详情
                    if (res.data.fail > 0 && res.data.failDetails) {
                        let details = '';
                        res.data.failDetails.forEach(function(item) {
                            details += `<p>行 ${item.line}: ${item.reason}</p>`;
                        });
                        $('#failDetails').html(details);
                        // 展开失败详情
                        $('.layui-collapse').find('.layui-colla-content').addClass('layui-show');
                    }
                    
                    $('#importResult').removeClass('layui-hide');
                    layer.msg(res.msg, {icon: 2});
                    
                }
            },
            error: function() {
                layer.closeAll('loading');
                layer.msg('上传失败', {icon: 2});
            }
        });

        // 进度条更新
        function updateProgress(percent) {
            element.progress('importProgress', percent + '%');
        }

         // 重置上传区域（如果需要）
        window.resetUpload = function() {
            $('#uploadPreview').fadeOut(300, function() {
                $(this).addClass('layui-hide');
                $('#uploadTip')
                    .removeClass('layui-hide')
                    .hide()
                    .fadeIn(300);
            });
        };

        
    });
    </script>

</body>
</html>